<template>
	<view class="center">
		<u-toast ref="uToast" />
		<u-modal v-model="appShow" :content="deleteText" title="清除缓存" show-cancel-button confirm-text="清除"
			@confirm="getappUninstall"></u-modal>
		<!-- <view class="animated" hover-class="fadeInDown">动画测试</view> -->
		<view class="appCenter box_radius">
			<view class="app_img box box-align-center box-pack-between">
				<view class="box box-align-center " style="width: 70%;">
					<view class="img">
						<image :src="addForm.app_img" mode=""></image>
					</view>
					<view class="text" style="margin-left: 20rpx;">
						<view style="font-size: 36rpx;margin-bottom: 10rpx;">{{addForm.app_name}}</view>
						<view>版本号 ({{addForm.app_version_name}})</view>
					</view>
				</view>
				<view class="box_radius box box-align-center box-pack-center" style="margin-right: 20rpx">
					<u-button class="app_btn" size="mini" :custom-style="app_btn" @click="deleteApp">清除缓存</u-button>
				</view>
			</view>
			<view class="app_control box box-align-center box-pack-between" hover-class="tada">
				<view class="control_left box box-align-center">
					联网管控
				</view>
				<view class="control_right">
					<u-switch v-model="addForm.is_network" size="45" active-color="#4880ff" inactive-color="#cdcdcd"
						active-value="1" inactive-value="0" activeTxt="联网" inactiveTxt="禁网" swtichTxt @change ="((val) => {getEditApp(val, 'is_network')})"></u-switch>
				</view>
			</view>
			<view class="app_control box box-align-center box-pack-between">
				<view class="control_left box box-align-center">
					升级管控
				</view>
				<view class="control_right">
					<u-switch v-model="addForm.is_upgrade" size="45" active-color="#4880ff" inactive-color="#cdcdcd"
						active-value="1" inactive-value="0" activeTxt="更新" inactiveTxt="禁止" swtichTxt @change ="((val) => {getEditApp(val, 'is_upgrade')})"></u-switch>
				</view>
			</view>
			<view class="app_control box box-align-center box-pack-between">
				<view class="control_left box box-align-center">
					自启管控
				</view>
				<view class="control_right">
					<u-switch v-model="addForm.is_auto" size="45" active-color="#4880ff" inactive-color="#cdcdcd"
						active-value="1" inactive-value="0" activeTxt="允许" inactiveTxt="禁止" swtichTxt @change ="((val) => {getEditApp(val, 'is_auto')})"></u-switch>
				</view>
			</view>
			<!-- <view class="app_control box box-align-center box-pack-between">
				<view class="control_left box box-align-center">
					时间管控
				</view>
				<view>18:00--20:00</view>
				<view class="control_right">
					<u-switch v-model="modelee" size="40" active-color="#4880ff" inactive-color="#cdcdcd"></u-switch>
				</view>
			</view> -->
			<!-- <view class="app_control box box-align-center box-pack-between animated"  v-for="(item,index) in addFormState.domains" :key="index" 
			:class="[index == antionDown ? antionShow : '']">
				<view class="control_left box box-align-center">
					域名/地址
				</view>
				<view class="control_right box box-align-center">
					<input class="control_input" type="text" value="" placeholder="请输入限制域名和IP地址" placeholder-style="color:#c1cdda;font-size:12px"
					 v-model="item.control_name" />
					 <view class="add-icon" v-if="index == 0" @click="addDomain(1,index)">
					 	<u-icon size="34" color="#4880ff" name="plus-circle-fill" ></u-icon>
					 </view>
					 <view class="add-icon" v-else  @click.prevent="removeDomain(1,item,index)">
					 	<u-icon size="34" color="#4880ff" name="minus-circle-fill"></u-icon>
					 </view>
				</view>
			</view>
			<view class="app_control box box-align-center box-pack-between animated" v-for="(item1,index1) in addFormState.appMains" :key="index1"
			:class="[index1 == vistDown ? vistShow : '']">
				<view class="control_left box box-align-center">
					应用内访问控制
				</view>
				<view class="control_right box box-align-center">
					<input class="control_input" type="text" value="" placeholder="请输入限制域名和IP地址" placeholder-style="color:#c1cdda;font-size:12px"
					 v-model="item1.control_name" />
					 <view class="add-icon" v-if="index1 == 0" @click="addDomain(2,index1)">
					 	<u-icon  size="34" color="#4880ff" name="plus-circle-fill"></u-icon>
					 </view>
					 <view class="add-icon" v-else @click.prevent="removeDomain(2,item1,index1)">
					 	<u-icon  size="34" color="#4880ff" name="minus-circle-fill"></u-icon>
					 </view>
				</view>
			</view> -->
			<view class="appButton box box-align-center">
				<!-- <button type="default" class="box box-align-center box-pack-center" @click="deleteApp">
					<image style="height: 60rpx;width: 60rpx;margin-right: 10rpx;" src="/static/app7.png" mode=""></image>
					删除应用
				</button> -->
			</view>
		</view>
<!-- 		<view class="appCenter_id box_radius">
			<view class="top box box-align-center box-pack-between">
				<view class="left_id">
					<view class="title">应用ID管控</view>
					<view class="txt">设置应用ID管控后，可以屏蔽应用内部控件访问。</view>
				</view>
				<view class="right_switch">
					<u-switch v-model="addForm.inside_status" size="45" active-color="#4880ff" inactive-color="#cdcdcd"
						active-value="1" inactive-value="0"></u-switch>
				</view>
			</view>
			<view class="bottom box box-align-center box-pack-between" @click="borwserShow = true">
				<view>ID内容</view>
				<view>{{addForm.inside_content}}<u-icon name="arrow-right"></u-icon></view>
			</view>
		</view> -->
<!-- 		<view class="appButton box box-align-center box-pack-center" style="margin-top: 20rpx;">
			<u-button class="app_btn" size="medium" :custom-style="app_btn" @click="geteditAppInstall">部署管控</u-button>
		</view> -->
		
<!-- 		<u-modal v-model="borwserShow" title="ID管控设置" width="90%" @cancel="browserCancel" negative-top="200"
			mask-close-able>
			<view class="browser-center">
				<view class="browser-input" style="margin:20rpx">
					<u-input size="mini" v-model="addForm.inside_content" type="textarea"  placeholder="输入ID用英文逗号隔开"
						placeholder-style="font-size:10px" :custom-style="inputObj" height="200" />
				</view>
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	import {
		getAppInstall,
		editAppInstall,
		appUninstall,
		queryIdApp,
		cleanAppCache
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				app_btn: {
					color: '#FFFFFF',
					'background-color': '#2979ff',
					'letter-spacing': '8rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'font-weight': '600',
					'border-radius': '80rpx',
				},
				inputObj: {
					'font-size': '10px',
					'background-color': '#dae0e7',
					'padding': '5px 10px',
					'border-color': '#dae0e7',
					'border': '1px solid #dae0e7',
					'border-radius': '8px'
				},
				appShow: false,
				deleteText: '是否在改平板上删除 ',
				modelee: true,
				appId: 0,
				addFormState: {
					domains: [{
						control_name: ''
					}],
					appMains: [{
						control_name: ''
					}]
				},
				addForm: {
					id: 0,
					is_network: false,
					is_upgrade: false,
					app_img: '',
					app_name: '',
					app_size: '',
					app_version_name: '',
					is_auto: false,
					is_slide: false,
					
				},
				antionDown: '',
				antionShow: '',
				vistDown: '',
				vistShow: '',
				borwserShow: false,
			}
		},
		onLoad(option) {
			this.appId = option.appId
			this.getqueryIdApp(option.appId)
		},
		methods: {
			getqueryIdApp(id) {
				queryIdApp({
					id: id
				}).then(res => {
					this.addForm.is_network = Boolean(res.data.is_network)
					this.addForm.is_upgrade = Boolean(res.data.is_upgrade)
					this.addForm.app_name = res.data.app_name
					this.addForm.app_size = res.data.app_size
					this.addForm.app_img = res.data.app_img
					this.addForm.app_version_name = res.data.app_version_name
					this.addForm.is_auto = Boolean(res.data.is_auto)
				}).catch(err => {})
			},
			//部署管控
			getEditApp(val, name) {
				let editForm = {
					id:this.appId,
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					name: name,
					value: Number(val)
				}
				editAppInstall(editForm).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			},
			//删除应用
			deleteApp() {
				this.appShow = true
				this.deleteText = `是否清除${this.addForm.app_name}应用缓存`
			},
			//卸载应用
			getappUninstall() {
				cleanAppCache({
					app_id: this.appId,
					userId: uni.getStorageSync('userId')
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false,
						callback: () => {
							uni.navigateBack({
								delta: 1
							});
						}
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//添加域名input框
			addDomain(value, index) {
				if (value == 1) {
					this.addFormState.domains.push({
						control_name: '',
						key: Date.now()
					});
				} else {
					this.addFormState.appMains.push({
						control_name: '',
						key: Date.now()
					});
				}
			},
			//删除域名input框
			removeDomain(indexs, item, index) {
				if (indexs == 1) {
					this.addFormState.domains.splice(index, 1)
				} else {
					this.addFormState.appMains.splice(index, 1)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.appCenter {
		color: #000;
		background-color: #f2f1f1;
		padding: 20rpx 0;

		image {
			height: 100%;
			width: 100%;
		}

		.app_img {
			text-align: center;
			padding: 20rpx;
			background-color: #f2f1f1;

			.img {
				height: 100rpx;
				width: 100rpx;
			}
		}

		.app_control {
			padding: 20rpx 0 20rpx 20rpx;
			background-color: #f2f1f1;
			margin-top: 20rpx;
			font-size: 24rpx;

			.control_left {
				.img {
					height: 80rpx;
					width: 80rpx;
					margin-right: 10rpx;
				}
			}

			.control_right {
				margin-right: 20rpx;

				.control_input {
					border: 1px solid #4880ff;
					padding: 5rpx 10rpx;
					margin-right: 5rpx;
					border-radius: 36rpx;
				}

				.add-icon {
					height: 60rpx;
					line-height: 60rpx;
					width: 50rpx;
					text-align: center;
				}
			}
		}
	}

	.appButton {
		margin-top: 40rpx;

		button {
			color: #FFFFFF;
			background-color: #4880ff;
			font-size: 28rpx;
			padding: 10rpx 260rpx;
			border-radius: $uni-border-radius-lg;
		}
	}

	.appCenter_id {
		color: #000;
		background-color: #f2f1f1;
		padding: 20rpx;
		margin-top: 20rpx;
		.top{
			.left_id{
				.tilte {
					font-size: 36rpx;
				}
				.txt{
					font-size: 20rpx;
					line-height: 30px;
					color: #585858;
				}
			}
		}
		.bottom{
			font-size: 20rpx;
			color: #585858;
			margin-top: 20rpx;
		}
	}
</style>
